<template>
  <el-dialog
    :title="params.title"
    width="400px"
    :close-on-click-modal="false"
    :visible.sync="params.visible"
  >
    <el-form v-model="formData" label-width="80px">
      <el-form-item :label="label1">
        <el-input v-model="formData.scriptName" :placeholder="label1">
          <el-checkbox
            slot="append"
            v-model="formData.systemScript"
          >系统组件</el-checkbox>
        </el-input>
      </el-form-item>
      <el-form-item :label="label2">
        <el-input
          v-model="formData.scriptIcon"
          readonly
          :placeholder="label2"
        >
          <el-tooltip
            slot="append"
            effect="dark"
            content="此图标只在Control上显示"
            placement="bottom"
          >
            <el-upload
              :action="Global.BASEURL"
              :show-file-list="showFileList"
              accept=".jpg,.png,.jpeg"
              :on-success="handleSuccess"
            >
              <el-button icon="el-icon-folder" />
            </el-upload>
          </el-tooltip>
        </el-input>
      </el-form-item>
      <el-form-item v-if="show1" label="组件类型">
        <el-select v-model="formData.scriptType">
          <el-option
            v-for="(item, index) in optionArr"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="show2">
        <el-checkbox-group v-model="formData.checkboxs">
          <el-checkbox label="检查关联组件" />
          <el-checkbox v-if="show1" label="不生成初始模版" />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <dialog-btn slot="footer" />
    <componet-quoted-cmp-pro v-if="componetQuotedCmpProParams.visible" :params="componetQuotedCmpProParams" />
  </el-dialog>
</template>

<script>
import { ParamArr } from '../../../public/js/paramarr'
import Global from '../../../public/js/global'
import { getComponent, setComponent, newComponent } from '@/api/core'
import ComponetQuotedCmpPro from '@/views/script/dialog/ComponetQuotedCmpPro.vue'
export default {
  name: 'AddScriptDialogs',
  components: { ComponetQuotedCmpPro },
  props: {
    params: {
      type: Object,
      default() {
        return {
          visible: false,
          title: '', // 弹窗标题
          id: '', // 组件/分组id
          pid: '', // 当前组件/分组上级id
          type: '', // 四种状态'addScript', 'setScript', 'addGroup', 'setScript'
          scriptType: '' // 组件分类集合 新增组件使用
        }
      }
    }
  },
  data() {
    return {
      label1: '组件名称',
      label2: '组件图标',
      formData: {
        scriptName: '',
        systemScript: false,
        scriptIcon: '',
        scriptType: '',
        checkboxs: []
      },
      show1: false,
      show2: false,
      optionArr: [],
      isScript: true,
      g_smType: 0,
      showFileList: false,
      iconId: '',
      componetQuotedCmpProParams: {
        visible: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.params.type === 'addScript') {
        this.show1 = true
        this.show2 = true
        // 不显示英文脚本和脚本向导
        for (let i = 0; i < this.params.scriptType.length; i++) {
          if (i === 0 || i === 4) continue
          this.optionArr.push(this.params.scriptType[i])
        }
        this.formData.scriptType = this.params.scriptType[2]
      }
      if (this.params.type === 'setScript') {
        this.show1 = false
        this.show2 = true
      }
      this.isScript = this.params.type.toUpperCase().indexOf('GROUP') === -1
      if (!this.isScript) {
        this.label1 = '分组名称'
        this.label2 = '分组图标'
      }
      if (this.params.id !== undefined && this.params.id !== '') {
        const vPar = new ParamArr()
        vPar.setStr('ID', this.params.id)
        getComponent(vPar)
          .then((vPar) => {
            this.g_smType = vPar.getInt('smType')
            this.formData.scriptName = vPar.getStr('Name')
            this.formData.systemScript = vPar.getInt('IsSys') === 1
          })
          .catch(() => {})
      }
    },
    handleSuccess(response, file, fileList) {
      if (file.size / 1024 > 500) {
        return this.$message.warning(
          Global.getENStr('请选择500KB以下的图片！')
        )
      }
      this.formData.scriptIcon = file.name
      const imgType = ['jpg', 'png', 'jpeg']
      const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (imgType.indexOf(fileType) === -1) { return this.$message.warning(Global.getENStr('请选择正确格式的图片！')) }
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = function() {
        const reg = Global.strFormat('data:{0};base64,', file.raw.type)
        this.iconId = reader.result.replace(new RegExp(reg), '')
      }
    },
    confirm() {
      if (this.formData.scriptName.trim() === '') { return this.$message.warning('名称中不能有空格，请输入') }
      if (this.formData.scriptName.indexOf(' ') !== -1) { return this.$message.warning('名称中不能有空格，请重新输入') }
      if (this.formData.scriptName.length > 128) { return this.$message.warning('名称长度不能超过128个字符') }
      if (this.formData.checkboxs.indexOf('检查关联组件') !== -1) {
        this.componetQuotedCmpProParams = {
          visible: true,
          id: this.params.id,
          isOnlyCheck: true
        }
        this.componetQuotedCmpProParams.confirm = (params) => {
          this.componetQuotedCmpProParams.visible = false
          if (params.result) {
            this.postDataToServer()
          }
        }
      } else {
        this.postDataToServer()
      }
    },
    postDataToServer() {
      const vPar = new ParamArr()
      if (this.params.type === 'addScript') {
        this.g_smType = this.params.scriptType
          .indexOf(this.formData.scriptType)
          .toString()
      }
      vPar.setStr('PID', this.params.pid)
      vPar.setInt('Type', this.isScript ? 1 : 0)
      vPar.setStr('Name', this.formData.scriptName)
      vPar.setBool('IsSys', this.formData.systemScript)
      vPar.setInt('smType', this.g_smType)
      if (this.formData.checkboxs.indexOf('不生成初始模版') !== -1) { vPar.setInt('InitFlag', 1) }
      if (this.iconId !== '') {
        vPar.setBool('IsBase64IMG', true)
        vPar.setStr('Icon', this.iconId)
      }
      if (this.params.id !== undefined && this.params.id !== '') {
        vPar.setStr('ID', this.params.id)
        setComponent(vPar)
          .then(() => {
            const params = {
              scriptName: this.formData.scriptName
            }
            if (this.params.confirm !== undefined) {
              this.params.confirm(params)
            } else {
              this.$emit('confirm', params)
            }
          })
          .catch(() => {})
      } else {
        newComponent(vPar)
          .then(() => {
            if (this.params.confirm !== undefined) {
              this.params.confirm()
            } else {
              this.$emit('confirm', '')
            }
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style scoped>
</style>
